<template>
  <div class="clas_All">
    <el-row>
      <el-col>
        <el-button v-hasPermi="['bom:trans:add']" @click="Addlist()">
          添加
        </el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column align="center" prop="stapCode" label="物料编码">
          </el-table-column>
          <el-table-column align="center" prop="stapName" label="物料名称">
          </el-table-column>
          <el-table-column align="center" prop="baseUnit" label="采购单位">
          </el-table-column>
          <el-table-column align="center" prop="unit" label="核算单位">
          </el-table-column>
          <el-table-column align="center" prop="remark1" label="核算单位名称">
          </el-table-column>
          <el-table-column align="center" prop="factor" label="采购因子">
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <div>
                <el-button
                  size="mini"
                  type="text"
                  v-hasPermi="['bom:trans:edit']"
                  @click="EditShowUnit(scope.row)"
                >
                  编辑
                </el-button>
                <el-button
                  size="mini"
                  v-hasPermi="['bom:trans:remove']"
                  type="text"
                  @click="DelUnit(scope.row)"
                >
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 添加单位信息 -->
    <el-dialog
      title="添加单位信息"
      @open="onShowAddOpen"
      @close="onShowAddClose"
      :visible.sync="showVisittion"
      width="70%"
    >
      <el-form :inline="true" :model="queryparam" class="demo-form-inline">
        <el-row>
          <el-col>
            <el-form-item label="物料名称">
              <el-input
                @focus="materialsVisible = true"
                v-model="queryparam.stapName"
              ></el-input>
            </el-form-item>
            <el-form-item label="物料编码">
              <el-input disabled v-model="queryparam.stapCode"></el-input>
            </el-form-item>
            <el-form-item label="采购单位">
              <el-input disabled v-model="queryparam.stapBaseUnit"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="计算因子">
              <el-input v-model="queryparam.factor"></el-input>
            </el-form-item>
            <el-form-item label="核算单位">
              <el-input
                @focus="UnitVisittion = true"
                v-model="queryparam.unit"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showVisittion = false">取 消</el-button>
        <el-button type="primary" @click="AddShow()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 选择物料 -->
    <el-dialog
      @open="onMaterialsOpen"
      @close="onMaterialsClose"
      width="40%"
      title="选择物料"
      :visible.sync="materialsVisible"
    >
      <el-form
        :model="materialsQueryParams"
        :inline="true"
        size="small"
        label-width="100px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item prop="">
              <el-input
                v-model="materialsQueryParams.stapCode"
                placeholder="请输入原料编码"
              ></el-input>
            </el-form-item>
            <el-form-item prop="">
              <el-input
                v-model="materialsQueryParams.stapName"
                placeholder="请输入原料名称"
              ></el-input>
            </el-form-item>
            <el-button @click="getMaterialsList">查找</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        highlight-current-row
        @current-change="materialsChange"
        :data="materialsData"
        style="width: 100%"
      >
        <el-table-column align="center" prop="stapTypeName" label="类别">
        </el-table-column>
        <el-table-column prop="stapCode" align="center" label="原料编码">
        </el-table-column>
        <el-table-column prop="stapName" align="center" label="原料名称">
        </el-table-column>
        <el-table-column align="center" prop="stapBaseUnit" label="单位">
        </el-table-column>
      </el-table>
      <pagination
        :total="materialstotal"
        :page.sync="materialsQueryParams.pageNum"
        :limit.sync="materialsQueryParams.pageSize"
        @pagination="getMaterialsList"
      />
      <el-row style="margin-top: 30px">
        <el-col :span="12">
          <el-button type="primary" size="medium" round @click="MaterialsCan()">
            确定
          </el-button>
        </el-col>
        <el-col :span="12">
          <el-button
            type="primary"
            size="medium"
            round
            @click="MaterialsDeny()"
          >
            取消
          </el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 选择单位 -->
    <el-dialog
      @open="onpen"
      @close="OnClose"
      title="选择单位"
      :visible.sync="UnitVisittion"
      width="40%"
    >
      <el-table
        highlight-current-row
        @current-change="unitChange"
        :data="unitList"
        style="width: 100%"
      >
        <el-table-column prop="id" align="center" label="id"> </el-table-column>
        <el-table-column align="center" prop="fname" label="单位">
        </el-table-column>
        <el-table-column prop="fnumber" align="center" label="单位简写">
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="unitDeny">取 消</el-button>
        <el-button type="primary" @click="unitCan">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改单位信息 -->
    <el-dialog
      title="修改单位信息"
      @open="onShowEditOpen"
      @close="onShowEditClose"
      :visible.sync="ShowEditVisition"
      width="70%"
    >
      <el-form :inline="true" :model="queryparam" class="demo-form-inline">
        <el-row>
          <el-col>
            <el-form-item label="物料名称">
              <el-input
                @focus="materialsVisible = true"
                disabled
                v-model="queryparam.stapName"
              ></el-input>
            </el-form-item>
            <el-form-item label="物料编码">
              <el-input disabled v-model="queryparam.stapCode"></el-input>
            </el-form-item>
            <el-form-item label="采购单位">
              <el-input disabled v-model="queryparam.stapBaseUnit"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="计算因子">
              <el-input v-model="queryparam.factor"></el-input>
            </el-form-item>
            <el-form-item label="核算单位">
              <el-input
                disabled
                @focus="UnitVisittion = true"
                v-model="queryparam.unit"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showVisittion = false">取 消</el-button>
        <el-button type="primary" @click="EditShow()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { bomDish_bom } from "@/api//system/bom.js";
import {
  transList,
  transAdd,
  transEdit,
  transDel,
  getMeasureUnit,
} from "@/api//system/stap_unit.js";
export default {
  data() {
    return {
      // 展示添加单位
      showVisittion: false,
      // 选择单位
      UnitVisittion: false,
      // 选择物料
      materialsVisible: false,
      tableData: [],
      queryparam: {
        factor: 1,
      },
      stapVisittion: false,
      ShowEditVisition: false,
      materialsQueryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      materialstotal: 0,
      materialsData: [],
      materialsList: {},
      unitList: [],
      unitNav: {},
      unitQuery: {},
    };
  },
  created() {
    this.transListOne();
  },
  methods: {
    name() {},
    transListOne() {
      transList().then((res) => {
        this.tableData = res.rows;
      });
    },
    Addlist() {
      this.showVisittion = true;
    },
    onMaterialsOpen() {
      this.getMaterialsList();
    },
    getMaterialsList() {
      let TqlDish = {
        ...this.materialsQueryParams,
      };
      bomDish_bom(TqlDish).then(
        (response) => {
          // console.log(response);
          if (response.code == 200) {
            this.materialsData = response.rows;
            this.materialstotal = response.total;
          } else {
            this.$message({
              message: response.msg,
              type: "warning",
              center: true,
            });
          }
        },
        (error) => {
          this.$message({
            message: error,
            type: "warning",
            center: true,
          });
        }
      );
    },
    onMaterialsClose() {
      this.materialsQueryParams.stapCode = "";
      this.materialsQueryParams.stapName = "";
      this.activeName = "first";
    },
    materialsChange(v) {
      if (v) {
        this.materialsList = v;
      }
    },
    unitChange(v) {
      if (v) {
        this.unitNav = v;
      }
    },
    MaterialsCan() {
      // this.queryparam = {
      //   ...this.queryparam,
      //   ...this.materialsList,
      // };
      this.queryparam.baseUnit = this.materialsList.stapBaseUnit;
      this.queryparam.stapName = this.materialsList.stapName;
      this.queryparam.stapCode = this.materialsList.stapCode;
      this.materialsVisible = false;
    },
    unitCan() {
      this.queryparam.tenantId = this.unitNav.id;
      this.queryparam.unit = this.unitNav.fnumber;
      this.queryparam.remark1 = this.unitNav.fname;
      this.queryparam.auditStatus = 1;
      this.UnitVisittion = false;
    },
    onpen() {
      getMeasureUnit({ ...this.unitQuery }).then(
        (res) => {
          if (res.code == 200) {
            this.unitList = res.data;
          } else {
            this.$message({
              message: res.msg,
              type: "warning",
              center: true,
            });
          }
        },
        (error) => {
          this.$message({
            message: error,
            type: "warning",
            center: true,
          });
        }
      );
    },
    unitDeny() {
      this.unitNav = {};
      this.unitList = [];
      this.UnitVisittion = false;
    },
    AddShow() {
      transAdd({ ...this.queryparam }).then(
        (res) => {
          if (res.code == 200) {
            this.showVisittion = false;
            this.transListOne();
            this.$message({
              message: res.msg,
              type: "success",
              center: true,
            });
          } else {
            this.$message({
              message: res.msg,
              type: "warning",
              center: true,
            });
          }
        },
        (error) => {
          this.$message({
            message: error,
            type: "warning",
            center: true,
          });
        }
      );
    },
    EditShowUnit(v) {
      this.queryparam = v;
      this.ShowEditVisition = true;
    },
    EditShow() {
      transEdit({ ...this.queryparam }).then(
        (res) => {
          if (res.code == 200) {
            this.ShowEditVisition = false;
            this.transListOne();
            this.$message({
              message: res.msg,
              type: "success",
              center: true,
            });
          } else {
            this.$message({
              message: res.msg,
              type: "warning",
              center: true,
            });
          }
        },
        (error) => {
          this.$message({
            message: error,
            type: "warning",
            center: true,
          });
        }
      );
    },
    onShowEditOpen() {},
    onShowEditClose() {
      this.queryparam = {
        factor: 1,
      };
    },
    OnClose() {},
    onShowAddOpen() {},
    onShowAddClose() {
      this.queryparam = {
        factor: 1,
      };
    },
    DelUnit(v) {
      transDel(v.id).then(
        (res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: "success",
              center: true,
            });
          } else {
            this.$message({
              message: res.msg,
              type: "warning",
              center: true,
            });
          }
        },
        (error) => {
          this.$message({
            message: error,
            type: "warning",
            center: true,
          });
        }
      );
    },
    MaterialsDeny() {
      this.materialsVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.clas_All {
  margin: 20px;
}
</style>
